<template>
  <view @click="handleFocus">
    <wd-search
      @clear="handleClear"
      placeholder="请输入商品名称"
      v-model="spuName"
      :hide-cancel="true"
      @search="handleSearch"
    />
  </view>

  <template v-if="!showHistory">
    <view class="">
      <view class="flex bg-white p-2 items-center" @click="toDetail(item)" v-for="item in spus">
        <image :src="item.spuImgs[0]" class="w-90px h-90px shrink-0"></image>
        <view class="">
          <view class="text-sm leading-[1.2] font-bold">
            {{ item.spuName }}
          </view>
          <view class="text-gray-500 text-xs mt-1">
            {{ item.spuDescription }}
          </view>
          <view class="flex items-center">
            <view class="text-#1989fa text-xs translate-y-1px"> ￥ </view>
            <view class="text-#1989fa text-lg font-bold">
              {{ getPrice(item.skus) }}
            </view>
            <view class="text-gray-500 text-xs ml-1 translate-y-1px"> 起 </view>
          </view>
        </view>
      </view>
    </view>
    <view class="text-gray-500 text-sm text-center mt-4"> 没有更多了 </view>
  </template>
  <view class="rounded-2 bg-white searchHistory" v-else>
    <view class="flex items-center justify-between py-3 px-4">
      <view class="text-base"> 历史记录 </view>
      <image
        v-if="historyList.length"
        @click="clickDelete"
        class="w-17px h-17px"
        src="/static/delete.svg"
      />
    </view>
    <view class="px-4 pb-2">
      <wd-tag
        @click="clickTag(item)"
        type="primary"
        custom-class="historyItem"
        round
        v-for="item in historyList"
        >{{ item }}</wd-tag
      >
    </view>
  </view>
  <wd-message-box />
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { getSpus } from "../../api/product";
import { ref, watch } from "vue";
import { useMessage } from "wot-design-uni";

let catId = null;
const spus = ref([]);
const spuName = ref("");
const showHistory = ref(false);
const historyList = ref([]);
const handleFocus = () => {
  showHistory.value = true;
};
const fetchList = () => {
  const params = {};
  if (catId) params["categoryIds[]"] = catId;
  if (spuName.value) params.spuName = spuName.value;
  getSpus(params).then((res) => {
    spus.value = res.data.list;
  });
};
onLoad((e) => {
  catId = e.categoryId; 
  fetchList();
});
const getPrice = () => {
  return 1999;
};
const handleSearch = () => {
  if (!historyList.value.includes(spuName.value)) {
    historyList.value.unshift(spuName.value);
  } else {
    const index = historyList.value.findIndex((item) => item === spuName.value);
    historyList.value.splice(index, 1);
    historyList.value.unshift(spuName.value);
  }
  uni.setStorageSync("searchHistory", historyList.value);
  fetchList();
  showHistory.value = false;
};
const initData = () => {
  const list = uni.getStorageSync("searchHistory");
  if (list?.length) historyList.value = list;
};
initData();

const clickTag = (text) => {
  spuName.value = text;
  showHistory.value = false;
  fetchList();
};

const handleClear = () => {
  showHistory.value = false;
  fetchList();
};

const message = useMessage();
const clickDelete = () => {
  message.confirm("确认删除历史记录吗？").then(() => {
    historyList.value = [];
    uni.removeStorageSync("searchHistory");
    showHistory.value = false;
    fetchList();
  });
};

const toDetail = (item) => {
		uni.navigateTo({
			url: `/pages/goodsDetail/goodsDetail?id=${item._id}`
			
		})
	}
</script>

<style>
.searchHistory {
  margin: 10px;
  width: calc(100vw - 20px);
  min-height: 100px;
}

.historyItem {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
